import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';

import * as HeaderBarStories from './HeaderBar.stories';

<Meta of={HeaderBarStories} />

# HeaderBar

The HeaderBar component is a versatile navigation element that provides a consistent header layout across the application. It divides the header space into three sections (start, middle, and end), allowing for flexible content placement.

## Usage

<Canvas of={HeaderBarStories.Documentation} source={ { code: `
import React from "react";
import { HeaderBar, Button, IconButton, Avatar, Text } from "@webiny/admin-ui";
import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";

const HeaderBarExample = () => {
    const StartContent = () => (
        <Text size={"sm"} className={"text-neutral-dimmed"}>
            {"Headless CMS / Articles / The best article ever"}
        </Text>
    );

    const MiddleContent = () => <>Content in the middle</>;

    const EndContent = () => (
        <div className={"flex gap-x-sm"}>
            <Button variant={"ghost"} size={"md"} text={"Root tenant"} />
            <div
                className={
                    "flex items-center rounded-md gap-xxs py-xs px-xs bg-neutral-light"
                }
            >
                <Avatar
                    size={"sm"}
                    variant={"strong"}
                    image={<Avatar.Image src={"https://i.pravatar.cc/300"} />}
                    fallback={<Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}
                />
                <IconButton
                    variant={"ghost"}
                    size={"xs"}
                    color={"neutral-strong"}
                    icon={<KeyboardArrowRightIcon />}
                    onClick={() => console.log("clicked")}
                />
            </div>
        </div>
    );

    return (
        <HeaderBar
            start={<StartContent />}
            middle={<MiddleContent />}
            end={<EndContent />}
        />
    );
};

export default HeaderBarExample;

` } }
        additionalActions={[
            {
                title: 'Open in GitHub',
                onClick: () => {
                    window.open(
                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/HeaderBar/HeaderBar.tsx',
                        '_blank'
                    );
                },
            }
        ]}
/>

<Controls of={HeaderBarStories.Documentation} />

```tsx
import React from "react";
import { HeaderBar, Button, IconButton, Avatar, Text } from "@webiny/admin-ui";
import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";

const HeaderBarExample = () => {
    const StartContent = () => (
        <Text size={"sm"} className={"text-neutral-dimmed"}>
            {"Headless CMS / Articles / The best article ever"}
        </Text>
    );

    const MiddleContent = () => <>Content in the middle</>;

    const EndContent = () => (
        <div className={"flex gap-x-sm"}>
            <Button variant={"ghost"} size={"md"} text={"Root tenant"} />
            <div
                className={
                    "flex items-center rounded-md " +
"gap-xxs py-xs px-xs bg-neutral-light"
                }
            >
                <Avatar
                    size={"sm"}
                    variant={"strong"}
                    image={<Avatar.Image src={"https://i.pravatar.cc/300"} />}
                    fallback={<Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}
                />
                <IconButton
                    variant={"ghost"}
                    size={"xs"}
                    color={"neutral-strong"}
                    icon={<KeyboardArrowRightIcon />}
                    onClick={() => console.log("clicked")}
                />
            </div>
        </div>
    );

    return (
        <HeaderBar
            start={<StartContent />}
            middle={<MiddleContent />}
            end={<EndContent />}
        />
    );
};

export default HeaderBarExample;
```

## Examples

### Start Content Only

<Canvas of={HeaderBarStories.StartContentOnly} source={ { code: `
import React from "react";
import { HeaderBar, Text } from "@webiny/admin-ui";

const StartContentOnlyExample = () => {
    const StartContent = () => (
        <Text size={"sm"} className={"text-neutral-dimmed"}>
            {"Headless CMS / Articles / The best article ever"}
        </Text>
    );

    return <HeaderBar start={<StartContent />} />;
};

export default StartContentOnlyExample;
` } } />

### Middle Content Only

<Canvas of={HeaderBarStories.MiddleContentOnly} source={ { code: `
import React from "react";
import { HeaderBar } from "@webiny/admin-ui";

const MiddleContentOnlyExample = () => {
    const MiddleContent = () => <>Content in the middle</>;

    return <HeaderBar middle={<MiddleContent />} />;
};

export default MiddleContentOnlyExample;
` } } />

### End Content Only

<Canvas of={HeaderBarStories.EndContentOnly} source={ { code: `
import React from "react";
import { HeaderBar, Button, IconButton, Avatar } from "@webiny/admin-ui";
import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";

const EndContentOnlyExample = () => {
    const EndContent = () => (
        <div className={"flex gap-x-sm"}>
            <Button variant={"ghost"} size={"md"} text={"Root tenant"} />
            <div
                className={
                    "flex items-center rounded-md gap-xxs
                    py-xs px-xs bg-neutral-light"
                }
            >
                <Avatar
                    size={"sm"}
                    variant={"strong"}
                    image={<Avatar.Image src={"https://i.pravatar.cc/300"} />}
                    fallback={<Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}
                />
                <IconButton
                    variant={"ghost"}
                    size={"xs"}
                    color={"neutral-strong"}
                    icon={<KeyboardArrowRightIcon />}
                    onClick={() => console.log("clicked")}
                />
            </div>
        </div>
    );

    return <HeaderBar end={<EndContent />} />;
};

export default EndContentOnlyExample;
` } } />

### Start and End Content Only

<Canvas of={HeaderBarStories.StartEndContentOnly} source={ { code: `
import React from "react";
import { HeaderBar, Button, IconButton, Avatar, Text } from "@webiny/admin-ui";
import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";

const StartEndContentOnlyExample = () => {
    const StartContent = () => (
        <Text size={"sm"} className={"text-neutral-dimmed"}>
            {"Headless CMS / Articles / The best article ever"}
        </Text>
    );

    const EndContent = () => (
        <div className={"flex gap-x-sm"}>
            <Button variant={"ghost"} size={"md"} text={"Root tenant"} />
            <div
                className={
                    "flex items-center rounded-md gap-xxs py-xs px-xs bg-neutral-light"
                }
            >
                <Avatar
                    size={"sm"}
                    variant={"strong"}
                    image={<Avatar.Image src={"https://i.pravatar.cc/300"} />}
                    fallback={<Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}
                />
                <IconButton
                    variant={"ghost"}
                    size={"xs"}
                    color={"neutral-strong"}
                    icon={<KeyboardArrowRightIcon />}
                    onClick={() => console.log("clicked")}
                />
            </div>
        </div>
    );

    return <HeaderBar start={<StartContent />} end={<EndContent />} />;
};

export default StartEndContentOnlyExample;
` } } />

### Multiple Start Content Items

<Canvas of={HeaderBarStories.MoreStartContent} source={ { code: `
import React from "react";
import { HeaderBar, Button, IconButton, Avatar, Text } from "@webiny/admin-ui";
import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";

const MoreStartContentExample = () => {
    const StartContent = () => (
        <Text size={"sm"} className={"text-neutral-dimmed"}>
            {"Headless CMS / Articles / The best article ever"}
        </Text>
    );

    const MiddleContent = () => <>Content in the middle</>;

    const EndContent = () => (
        <div className={"flex gap-x-sm"}>
            <Button variant={"ghost"} size={"md"} text={"Root tenant"} />
            <div
                className={
                    "flex items-center rounded-md gap-xxs py-xs px-xs bg-neutral-light"
                }
            >
                <Avatar
                    size={"sm"}
                    variant={"strong"}
                    image={<Avatar.Image src={"https://i.pravatar.cc/300"} />}
                    fallback={<Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}
                />
                <IconButton
                    variant={"ghost"}
                    size={"xs"}
                    color={"neutral-strong"}
                    icon={<KeyboardArrowRightIcon />}
                    onClick={() => console.log("clicked")}
                />
            </div>
        </div>
    );

    return (
        <HeaderBar
            start={
                <>
                    <StartContent />
                    <StartContent />
                    <StartContent />
                </>
            }
            middle={<MiddleContent />}
            end={<EndContent />}
        />
    );
};

export default MoreStartContentExample;
` } } />
